<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        语法:
            1.v-if='表达式'
            2.v-else-if='表达式'
            3.v-else
        较为适用:切换频率较低的场景
        特点:不显示的节点被移除
        注意1：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
		注意2：如果使用v-if，可能会出现无法获取元素的问题。
     -->
    <div id="demo">
        <h1>当前的和为:{{sum}}</h1>
        <button @click='sum++'>点击sum+1</button>
        <h2 v-if='sum === 1'>Angular</h2>
        <h2 v-else-if='sum === 2'>React</h2>
        <h2 v-else-if='sum === 3'>Vue</h2>
        <h2 v-else>未知</h2>
    </div>
    <script>
        Vue.config.productionTip = false;

        new Vue({
            el:'#demo',
            data:{
                sum:0
            }
        })
    </script>
</body>

</html>